<template>
	<view>
		<!-- 头部 -->
		<view class="heads">
			等待支付
		</view>
		<!-- 地址栏区域 -->
		<view class="address">
			<view class="address-text" v-if="current" @tap="toAddressItem">去选择收货地址</view>
		</view>
		<!-- 商品详情区 -->
		<view class="goods-info" v-for="(item,index) in orderItems " :key="item.id">
			<view class="goods-top">
				<view >订单编号:{{orderBase.orderSn}}</view>
				<view>等待支付</view>
			</view>
			<view class="goods-bottom">
				<image :src="item.productPic" ></image>
				<view class="goods-bottom-content">
					<view>{{item.productName}}</view>
					<view>编号:{{item.id}}</view>
					<view>规格</view>
				</view>
				<view class="goods-bottom-num">
					<view>&#165{{item.productPrice}}元</view>
					<view>&#10005{{item.productQuantity}}</view>
				</view>
				
			</view>
			<view class="pay">
				<view>合计:{{all}}元</view>
				<button type="default" size="mini" @tap="btnEvent">确认付款</button>
			</view>
			
		</view>
	<!-- 尾巴 -->
	</view>
</template>

<script>
	import{
		getPreOrderById,
		addConfirmOrder
	}from "@/api/cart/index.js"
	
	export default {
		data() {
			return {
				current:false,
				id:"",
				 orderBase:{},
				 orderItems:[],
				 orderBaseId:"",
				 orderSnId:""
			};
		},
		
		methods:{
			toAddressItem(){
				uni.navigateTo({
					url:"/pages/home/cart/order/address/address"
				})
			},
			// 点击确认付款
		       btnEvent(){
				   //1.先在本地查找有无收藏地址,如果找不到就告知先让选择邮寄地址
				   var address = uni.getStorageSync("address")
				  if(address){
					  var orderItemList = [];
					  this.orderItems.forEach(ele =>{
					  					   var obj ={
					  						    productId:ele.productId,
					  							productSkuId: ele.productSkuId,
					  							productQuantity:ele.productQuantity
					  					   }
					  					   orderItemList.push(obj);
					  })
					  				  
					  addConfirmOrder({
					  					 
					  					    orderId: this.id,
					  					   orderItemList:orderItemList,
					  					   payType: 0,
					  					   sourceType: 1
					  })
					  .then(res =>{
					  					   console.log(res)
					  })
				  }else{
					  uni.showToast({
					  	title: "请选择收货地址!!!",
					  	icon: "none"
					  })
				  }
				   
				  
			   },
			   // 判断本地有没有存邮寄地址
			   address(){
				    var address = uni.getStorageSync("address")
					if(!address){
						this.current = true;
					}
			   }
		},
		onLoad(ele){
			this.id = ele.id
			console.log(this.id)
			getPreOrderById(this.id)
			.then(res=>{
				console.log(res)
				this.orderBase = res.data.data.orderBase
				this.orderBaseId = res.data.data.orderBase.id
				this.orderSnId = res.data.data.orderBase.orderSn
				this.orderItems = res.data.data.orderItems
			})
		},
		onShow(){
			this.address()
			
		},
		computed:{
			// 累加
			all(){
				return this.orderItems.reduce((total,current)=>{
					if(true){
					return	total + current.productQuantity * current.productPrice
					}else{
						return total
					}
					  
				},0)
			}
		}
	}
</script>

<style lang="scss" scoped>
// 头部
.heads{
	width: 90%;
	border-bottom: 1px #808080 solid;
	margin: 0 auto;
	height: 45px;
	line-height: 45px;
	font-size: 18px;
}
// 地址栏区域
.address{
	width: 90%;
	border-bottom: 1px #808080 solid;
	margin: 0 auto;
	height: 70px;
	line-height: 45px;
	font-size: 18px;
	.address-text{
		margin-top: 30px;
	}
}
// 商品详情区
.goods-info{
	border-radius: 16px;
	width: 90%;
	height: 240px;
	background-color:#AAAAAA;
	margin: 20px auto;
	.goods-top{
		display: flex;
		justify-content: space-between;
		view{
			padding: 0 10px;
		}
		view:nth-child(1){
			font-size: 12px;
			line-height: 50px;
		}
		view:nth-child(2){
			font-size: 16px;
			line-height: 50px;
		}
	}
	.goods-bottom{
		display: flex;
		justify-content:space-between ;
		image{
			display: block;
			width: 80px;
			height: 80px;
		}
		.goods-bottom-content{
			view{
				padding-bottom: 5px;
			}
			view:nth-child(2){
				font-size: 12px;
			}
			view:nth-child(3){
				font-size: 12px;
			}
		}
		.goods-bottom-num{
		view{
			padding-bottom: 10px;
			padding: 0 10px 0 0;
		}
	}
		
	}
	.pay{
		float: right;
		padding: 0 10px 0 0;
	}
}
</style>
